<script setup lang="ts" name="OneStockTallyHistory">
import router from "@/router";

import { onMounted, reactive, ref, watch } from "vue";
import { GetOneStockTallyHistory, RemoveOneStockTally } from "@/api/tally";
import { useEditOstInfo } from "@/store/edit-ost-info";
import { useHistorySearchParam } from "@/store/history-search-param";
import type { HistoryItemHeader, OstTallyHistoryItem } from "@/utils/interface";

const tallyTypeColorMap: Map<string, HistoryItemHeader> = new Map();
onMounted(() => {
  tallyTypeColorMap.set("OUT", {
    bg: "bg-gradient-to-r from-sky-50 to-white",
    typeBorder: "border-blue-500",
    text: "text-blue-800"
  });
  tallyTypeColorMap.set("IN", {
    bg: "bg-gradient-to-r from-amber-50 to-white",
    typeBorder: "border-yellow-500",
    text: "text-yellow-800"
  });
  tallyTypeColorMap.set("DIRECT", {
    bg: "bg-gradient-to-r from-green-50 to-white",
    typeBorder: "border-green-500",
    text: "text-green-800"
  });
  // getTallyHistory();
});

const dataList = ref([] as Array<OstTallyHistoryItem>);
const showDelConfirm = ref(false);
const preDelItem = ref({} as OstTallyHistoryItem);

const pageInfo = reactive({
  current: 1,
  size: 10,
  total: 0,
  loading: false
});

const historySearchParamStore = useHistorySearchParam();

watch(
  () => pageInfo.current,
  (newValue, oldValue) => {
    getTallyHistory(historySearchParamStore.historySearchParam);
  },
  { immediate: true }
);

watch(
  () => historySearchParamStore.historySearchParam,
  (newValue, oldValue) => {
    getTallyHistory(historySearchParamStore.historySearchParam);
  },
  { immediate: true, deep: true }
);

function getTallyHistory(historyParams: any) {
  const params = {
    personal: "Y",
    ...historyParams,
    current: pageInfo.current,
    size: pageInfo.size
  };
  pageInfo.loading = true;
  GetOneStockTallyHistory(params).then(res => {
    if (res) {
      dataList.value = res.data.records;
      dataList.value.forEach(item => {
        item.showPopover = false;
      });
      pageInfo.size = res.data.size;
      pageInfo.current = res.data.current;
      pageInfo.total = res.data.total;
    }
    pageInfo.loading = false;
  });
}

function goToEdit(item: OstTallyHistoryItem, isReuse: boolean) {
  item.isReuse = isReuse;
  const editOstInfoStore = useEditOstInfo();
  editOstInfoStore.removeEditOstInfo();
  editOstInfoStore.setBillInfo(item);
  item.showPopover = false;
  router.push("/one-stock-tally");
}

function showRemove(item: OstTallyHistoryItem) {
  showDelConfirm.value = true;
  preDelItem.value = item;
}

function removeTally() {
  if (!preDelItem.value || !preDelItem.value.id) {
    return;
  }
  RemoveOneStockTally(preDelItem.value.id).then(() => {
    getTallyHistory(historySearchParamStore.historySearchParam);
  });
}
</script>
<template>
  <div class="w-full h-auto flex flex-col bg-transparent mt-[10px]">
    <div class="flex flex-col items-center gap-3 w-full h-full mt-3 mb-5">
      <van-empty
        description="没有数据"
        v-if="dataList.length === 0 && !pageInfo.loading"
      />
      <van-loading color="#1989fa" v-if="pageInfo.loading" />
      <div
        v-for="item in dataList"
        :key="item.id"
        class="flex flex-col w-[95%] mx-auto h-auto bg-white mt-[10px]"
      >
        <div
          :class="tallyTypeColorMap.get(item.tallyType as string)?.bg"
          class="flex w-full h-[50px] justify-between items-center px-[15px]"
        >
          <div class="flex">
            <div class="flex font-bold text-[14px] items-center">
              {{ item.shipNameZh }}-{{ item.voyage }}
            </div>
            <div
              :class="tallyTypeColorMap.get(item.tallyType as string)?.typeBorder"
              class="ml-[10px] flex h-[20px] w-auto border-[1px] px-[5px] py-[3px] text-[10px] items-center"
            >
              <span
                :class="tallyTypeColorMap.get(item.tallyType as string)?.text"
                >{{ item.tallyTypeName }}</span
              >
            </div>
          </div>
          <div class="flex">
            <van-popover v-model:show="item.showPopover" placement="left">
              <div
                v-if="item.isEdit !== 'N'"
                class="flex flex-col w-[80px] h-[90px] text-[14px] justify-center"
              >
                <div
                  class="flex flex-1 w-full items-center justify-center"
                  @click="goToEdit(item, false)"
                >
                  编辑
                </div>
                <div
                  class="flex flex-1 w-full border-t-2 border-b-2 items-center justify-center"
                  @click="goToEdit(item, true)"
                >
                  复用
                </div>
                <div
                  class="flex flex-1 w-full text-red-600 items-center justify-center"
                  @click="showRemove(item)"
                >
                  删除
                </div>
              </div>
              <div
                v-if="item.isEdit === 'N'"
                class="flex flex-col w-[80px] h-[30px] text-[14px] justify-center"
              >
                <div
                  class="flex flex-1 w-full border-t-2 border-b-2 items-center justify-center"
                  @click="goToEdit(item, true)"
                >
                  复用
                </div>
              </div>
              <template #reference>
                <van-icon
                  :class="tallyTypeColorMap.get(item.tallyType as string)?.text"
                  name="setting-o"
                  size="20"
                />
              </template>
            </van-popover>
          </div>
        </div>
        <div class="flex w-full h-auto p-[15px] flex-col gap-2 text-[14px]">
          <div class="flex h-auto w-full">
            <div class="w-full h-auto flex items-center">
              <div class="flex text-gray-400">日期班次：</div>
              <div>{{ item.tallyDate }}/ {{ item.timeSpaceName }}</div>
            </div>
          </div>
          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">单号：</div>
              <div>{{ item.billNo }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">货名：</div>
              <div>{{ item.cargoTypeName }}</div>
            </div>
          </div>
          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">包装：</div>
              <div>{{ item.tallyPackageTypeName }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">航陆运：</div>
              <div>{{ item.shipLandName }}</div>
            </div>
          </div>
          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">作业过程：</div>
              <div>{{ item.operationTypeName }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">合格生产：</div>
              <div v-if="item.isSafeProduction === 'Y'" class="text-green-500">
                是
              </div>
              <div v-if="item.isSafeProduction === 'N'" class="text-red-500">
                否
              </div>
            </div>
          </div>
          <div class="flex h-auto w-full">
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">理货件吨：</div>
              <div>{{ item.tallyPiece }} / {{ item.tallyTon }}</div>
            </div>
            <div class="flex-1 h-auto flex items-center">
              <div class="flex text-gray-400">状态：</div>
              <div v-if="item.isEdit !== 'N'" class="text-green-500">
                可编辑
              </div>
              <div v-if="item.isEdit === 'N'" class="text-red-500">
                已锁定
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="showDelConfirm" round>
        <div class="h-[150px] w-[300px]">
          <div class="flex flex-col w-full h-full">
            <div
              class="w-full flex flex-1 justify-center items-center text-[18px]"
            >
              确定删除该理货记录吗？
            </div>
            <div class="w-full flex h-[50px]">
              <div class="flex flex-1 px-[10px]">
                <van-button
                  class="w-full h-full"
                  type="default"
                  @click="
                      showDelConfirm = false;
                      preDelItem = {} as OstTallyHistoryItem;
                    "
                >取消</van-button
                >
              </div>
              <div class="flex flex-1 px-[10px]">
                <van-button
                  class="w-full h-full"
                  type="danger"
                  @click="removeTally"
                >确定</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </van-popup>
      <div class="w-full h-auto px-[20px]">
        <van-pagination
          v-model="pageInfo.current"
          :total-items="pageInfo.total"
          :items-per-page="pageInfo.size"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
